{% extends 'mobile_app/base.html' %}
{% load static %}

{% block title %}郑州移不动 - 让移动更简单{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <!-- 欢迎区域 -->
        <div class="text-center mb-5">
            <div class="hero-section">
                <i class="fas fa-mobile-alt text-primary" style="font-size: 4rem;"></i>
                <h1 class="display-4 fw-bold text-primary mt-3">郑州移不动</h1>
                <p class="lead text-muted">让移动更简单，让生活更便捷</p>
                <p class="text-muted">专业的手机套餐余额查询系统，支持多号码管理、套餐查询、在线缴费等功能</p>
            </div>
        </div>

        <!-- 功能特色 -->
        <div class="row g-4 mb-5">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <i class="fas fa-phone text-primary mb-3" style="font-size: 2.5rem;"></i>
                        <h5 class="card-title">多号码管理</h5>
                        <p class="card-text text-muted">支持最多5个手机号码管理，轻松切换查询</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <i class="fas fa-chart-line text-success mb-3" style="font-size: 2.5rem;"></i>
                        <h5 class="card-title">余额查询</h5>
                        <p class="card-text text-muted">实时查询话费余额、流量剩余、语音时长</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <i class="fas fa-credit-card text-warning mb-3" style="font-size: 2.5rem;"></i>
                        <h5 class="card-title">在线缴费</h5>
                        <p class="card-text text-muted">支持多种缴费方式，自定义金额充值</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 登录/注册区域 -->
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card border-0 shadow">
                    <div class="card-body p-4">
                        <h4 class="card-title text-center mb-4">开始使用</h4>
                        <div class="d-grid gap-2">
                            <a href="{% url 'mobile_app:login' %}" class="btn btn-primary btn-lg">
                                <i class="fas fa-sign-in-alt me-2"></i>立即登录
                            </a>
                            <a href="{% url 'mobile_app:register' %}" class="btn btn-outline-primary btn-lg">
                                <i class="fas fa-user-plus me-2"></i>免费注册
                            </a>
                        </div>
                        <div class="text-center mt-3">
                            <small class="text-muted">
                                注册即送100元话费，立即体验完整功能
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 使用说明 -->
        <div class="row mt-5">
            <div class="col-12">
                <h4 class="text-center mb-4">使用说明</h4>
                <div class="row g-3">
                    <div class="col-md-3 text-center">
                        <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">1</div>
                        <h6>注册账号</h6>
                        <small class="text-muted">使用手机号注册账号</small>
                    </div>
                    <div class="col-md-3 text-center">
                        <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">2</div>
                        <h6>添加号码</h6>
                        <small class="text-muted">添加要管理的手机号码</small>
                    </div>
                    <div class="col-md-3 text-center">
                        <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">3</div>
                        <h6>选择套餐</h6>
                        <small class="text-muted">为号码选择合适的套餐</small>
                    </div>
                    <div class="col-md-3 text-center">
                        <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">4</div>
                        <h6>开始使用</h6>
                        <small class="text-muted">查询余额、缴费充值</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
